<template>
  <div class="container">
    <Navbar></Navbar>
    <div class="login-box">
      <h2>登录</h2>
      <van-form @submit="onSubmit">
        <van-cell-group inset :border="false">
          <van-field
            :border="false"
            size="large"
            v-model="userInfo.mobile"
            type="number"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号码"
          />
          <van-field
            size="large"
            v-model="userInfo.password"
            autocomplete="off"
            type="password"
            name="密码"
            label="密码"
            placeholder="请输入密码"
          />
        </van-cell-group>
        <div style="margin: 28px;">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar';
import { Notify } from 'vant';
import { login } from '@/network/member';

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      url: this.$route.query.url || '',
      userInfo: {
        mobile: '',
        password: '',
      },
    };
  },
  methods: {
    onSubmit() {
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.userInfo.mobile)) {
        return Notify({ type: 'danger', message: '请输入正确的手机号' });
      }
      login(this.userInfo).then((res) => {
        if (res.code == 0) {
          localStorage.setItem('token', res.data.token);
          this.$store.commit('setIsLogin', true);
          if (this.url) {
            location.href = this.url;
          } else {
            this.$router.go(-1);
          }
        } else {
          Notify({ type: 'danger', message: res.message });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  font-size: 24px;
  font-weight: 400;
  margin: 28px 0 18px 28px;
}
</style>
